<template>
    <div style="display: flex;width: 100%;height: 100vh; ">
        <!-- 右边 -->
        <div style="width: 300px;color: rgb(12, 21, 29); min-height: 100%;">
            <!-- 组件名 -->
            <div style="display:flex ;">
                <h1
                    style="margin-top: 10px;margin-left: 30px;width: 180px;text-align: center;background-color:rgb(240, 20, 31);">
                    {{ 组件名 }}</h1>
                <el-button size="small" style="margin-top: 20px;margin-left: 30px;" @click="重置组件">重置组件</el-button>
            </div>
            <div style="height: 90%;">
                <!-- 属性 -->
                <el-scrollbar height="100%">
                    <!-- 是否使用小型分页样式 -->
                    <div :style='样式1'>
                        <h4>是否使用小型分页样式 : </h4>
                        <spen :style='样式2'>英:small,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.small' size='small' @change="提交改变">
                            <el-radio :label=true>是 </el-radio>
                            <el-radio :label=false>否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否为分页按钮添加背景色 -->
                    <div :style='样式1'>
                        <h4>是否为分页按钮添加背景色 : </h4>
                        <spen :style='样式2'>英:background,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.background' size='small' @change="提交改变">
                            <el-radio :label=true>是 </el-radio>
                            <el-radio :label=false>否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 每页显示条目个数 -->
                    <div :style='样式1'>
                        <h4>每页显示条目个数 : </h4>
                        <spen :style='样式2'>英:page-size,类型:number,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性[":page-size"]' size='small' @change="提交改变">
                            <!-- <el-radio label=200>有例子 </el-radio>
                            <el-radio :label=null>无</el-radio> -->
                        </el-radio-group></div>
                    <!-- 每页默认的条目个数，不设置时默认为10 -->
                    <div :style='样式1'>
                        <h4>每页默认的条目个数，不设置时默认为10 : </h4>
                        <spen :style='样式2'>英:default-page-size,类型:number,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性[":default-page-size"]'
                            size='small' @change="提交改变">
                            <!-- <el-radio label=100>有例子 </el-radio>
                            <el-radio :label=null>无</el-radio> -->
                        </el-radio-group></div>
                    <!-- 总条目数 -->
                    <div :style='样式1'>
                        <h4>总条目数 : </h4>
                        <spen :style='样式2'>英:total,类型:number,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性[":total"]' size='small' @change="提交改变">
                            <!-- <el-radio label=500>有例子 </el-radio>
                            <el-radio :label=null>无</el-radio> -->
                        </el-radio-group></div>
                    <!-- 总页数， total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性 -->
                    <div :style='样式1'>
                        <h4>总页数， total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性 : </h4>
                        <spen :style='样式2'>英:page-count,类型:number,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性[":page-count"]' size='small' @change="提交改变">
                            <!-- <el-radio label=500>有例子 </el-radio>
                            <el-radio :label=null>无</el-radio> -->
                        </el-radio-group></div>
                    <!-- 设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠 -->
                    <div :style='样式1'>
                        <h4>设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠 : </h4>
                        <spen :style='样式2'>英:pager-count,类型:number,默认:7</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性[":pager-count"]' size='small' @change="提交改变">
                            <!-- <el-radio label="20">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio> -->
                        </el-radio-group></div>
                    <!-- 当前页数 -->
                    <div :style='样式1'>
                        <h4>当前页数 : </h4>
                        <spen :style='样式2'>英:current-page,类型:number,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性[":current-page"]'
                            size='small' @change="提交改变">
                            <!-- <el-radio label=2>有例子 </el-radio>
                            <el-radio :label=null>无</el-radio> -->
                        </el-radio-group></div>
                    <!-- 当前页数的默认初始值，不设置时默认为 1 -->
                    <div :style='样式1'>
                        <h4>当前页数的默认初始值，不设置时默认为 1 : </h4>
                        <spen :style='样式2'>英:default-current-page,类型:number,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性[":default-current-page"]'
                            size='small' @change="提交改变">
                            <!-- <el-radio label=3>有例子 </el-radio>
                            <el-radio :label=null>无</el-radio> -->
                        </el-radio-group></div>
                    <!-- 组件布局，子组件名用逗号分隔 -->
                    <div :style='样式1'>
                        <h4>组件布局，子组件名用逗号分隔 : </h4>
                        <spen :style='样式2'>英:layout,类型:string,默认:prev, pager, next, jumper, ->, total</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.layout' size='small' @change="提交改变">
                            <el-radio label="-">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 每页显示个数选择器的选项设置 -->
                    <div :style='样式1'>
                        <h4>每页显示个数选择器的选项设置 : </h4>
                        <spen :style='样式2'>英:page-sizes,类型:object,默认:[10, 20, 30, 40, 50, 100]</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["page-sizes"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 每页显示个数选择器的下拉框类名 -->
                    <div :style='样式1'>
                        <h4>每页显示个数选择器的下拉框类名 : </h4>
                        <spen :style='样式2'>英:popper-class,类型:string,默认:''</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["popper-class"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 替代图标显示的上一页文字 -->
                    <div :style='样式1'>
                        <h4>替代图标显示的上一页文字 : </h4>
                        <spen :style='样式2'>英:prev-text,类型:string,默认:''</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["prev-text"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 上一页的图标， 比 prev-text 优先级更高 -->
                    <div :style='样式1'>
                        <h4>上一页的图标， 比 prev-text 优先级更高 : </h4>
                        <spen :style='样式2'>英:prev-icon,类型:string / Component,默认:ArrowLeft</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["prev-icon"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 替代图标显示的下一页文字 -->
                    <div :style='样式1'>
                        <h4>替代图标显示的下一页文字 : </h4>
                        <spen :style='样式2'>英:next-text,类型:string,默认:''</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["next-text"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 下一页的图标， 比 next-text 优先级更低 -->
                    <div :style='样式1'>
                        <h4>下一页的图标， 比 next-text 优先级更低 : </h4>
                        <spen :style='样式2'>英:next-icon,类型:string / Component,默认:ArrowRight</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["next-icon"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 是否禁用分页 -->
                    <div :style='样式1'>
                        <h4>是否禁用分页 : </h4>
                        <spen :style='样式2'>英:disabled,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.disabled' size='small' @change="提交改变">
                            <el-radio :label=true>是 </el-radio>
                            <el-radio :label=false>否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否将下拉菜单teleport至 body -->
                    <div :style='样式1'>
                        <h4>是否将下拉菜单teleport至 body : </h4>
                        <spen :style='样式2'>英:teleported,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.teleported' size='small' @change="提交改变">
                            <el-radio :label=true>是 </el-radio>
                            <el-radio :label=false>否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 只有一页时是否隐藏 -->
                    <div :style='样式1'>
                        <h4>只有一页时是否隐藏 : </h4>
                        <spen :style='样式2'>英:hide-on-single-page,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["hide-on-single-page"]'
                            size='small' @change="提交改变">
                            <el-radio :label=true>是 </el-radio>
                            <el-radio :label=false>否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                        <h2 style="margin-top: 15px;background-color:rgb(63, 45, 45);color: aliceblue;">-------触发的事件 -----</h2>
                    <!-- page-size 改变时触发 -->
                    <div :style='样式1'>
                        <h4>page-size 改变时触发 : </h4>
                        <spen :style='样式2'>英:size-change,类型:Function,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='事件["size-change"]'
                            size='small' @change="提交改变">
                            <el-radio label="page-size改变时触发">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- current-page 改变时触发 -->
                    <div :style='样式1'>
                        <h4>current-page 改变时触发 : </h4>
                        <spen :style='样式2'>英:current-change,类型:Function,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='事件["current-change"]'
                            size='small' @change="提交改变">
                            <el-radio label="current-page改变时触发">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- current-page 或 page-size 更改时触发 -->
                    <div :style='样式1'>
                        <h4>current-page 或 page-size 更改时触发 : </h4>
                        <spen :style='样式2'>英:change,类型:Function,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='事件.change'
                            size='small' @change="提交改变">
                            <el-radio label="current-page或page-size更改时触发">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 用户点击上一页按钮改变当前页时触发 -->
                    <div :style='样式1'>
                        <h4>用户点击上一页按钮改变当前页时触发 : </h4>
                        <spen :style='样式2'>英:prev-click,类型:Function,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='事件["prev-click"]'
                            size='small' @change="提交改变">
                            <el-radio label="用户点击上一页按钮改变当前页时触发">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 用户点击下一页按钮改变当前页时触发 -->
                    <div :style='样式1'>
                        <h4>用户点击下一页按钮改变当前页时触发 : </h4>
                        <spen :style='样式2'>英:next-click,类型:Function,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='事件["next-click"]'
                            size='small' @change="提交改变">
                            <el-radio label="用户点击下一页按钮改变当前页时触发">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>

                </el-scrollbar>

            </div>
        </div>
        <!-- 左边 -->
        <div style="width: calc(100vw - 300px);;background-color: rgb(160, 178, 194); text-align: center;height: 99%;">
            <div style="width: 80%;margin: auto;margin-top: 20px;">
                <el-pagination   :page-size='50' :total='500' :pager-count='6' v-bind="属性"  />
            </div>
            
            <el-input v-model="代码" :autosize="{ minRows: 5, maxRows: 50 }" type="textarea" placeholder="代码展示" style="width: 98%;margin-top: 50px;"/>
        </div>
    </div>
</template>
<script setup>
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import { ElMessage, formItemContextKey, ElMessageBox } from 'element-plus'
import { ref, reactive } from 'vue'
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance();
const 提交方法 = proxy.API.提交方法 //提交方法('方法名',.....其他参数)
const ws广播 = proxy.API.监听ws广播 //监听ws广播('方法名',function(参数)) //广播 就是所有用户都会收到
const ws标识 = proxy.API.监听ws标识 //监听ws标识('方法名','标识',function(参数)) // 标识 相同标识的都会收到  比如多用户账号指定某账号  和 账号多处登录
const 跳转路由 =proxy.router

const 代码 = ref('')
const 提交改变=async()=>{
    let 结果=await 提交方法("组件修改",组件名.value,属性.value,事件.value)
    代码.value=结果
}

const 组件名 = ref('分页')
const 属性 = ref({
//     small:'',//是否使用小型分页样式
// background:'',//是否为分页按钮添加背景色
// page-size:'',//每页显示条目个数
// default-page-size:'',//每页默认的条目个数，不设置时默认为10
// total:'',//总条目数
// page-count:'',//总页数， total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性
// pager-count:'',//设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠
// current-page:'',//当前页数
// default-current-page:'',//当前页数的默认初始值，不设置时默认为 1
// layout:'',//组件布局，子组件名用逗号分隔
// page-sizes:'',//每页显示个数选择器的选项设置
// popper-class:'',//每页显示个数选择器的下拉框类名
// prev-text:'',//替代图标显示的上一页文字
// prev-icon:'',//上一页的图标， 比 prev-text 优先级更高
// next-text:'',//替代图标显示的下一页文字
// next-icon:'',//下一页的图标， 比 next-text 优先级更低
// disabled:'',//是否禁用分页
// teleported:'',//是否将下拉菜单teleport至 body
// hide-on-single-page:'',//只有一页时是否隐藏



})
const 事件=ref({
// size-change:'',//page-size 改变时触发
// current-change:'',//current-page 改变时触发
// change:'',//current-page 或 page-size 更改时触发
// prev-click:'',//用户点击上一页按钮改变当前页时触发
// next-click:'',//用户点击下一页按钮改变当前页时触发
})

const 重置组件=()=>{
    let 原生属性 = {}
    属性.value=原生属性
    事件.value={}
    提交改变()
}


const 样式1 = ref('display: flex;margin-top: 10px;margin-left: 5px;font-size: 14px;border: 1px solid #ccc;width:95%')
const 样式2 = ref('color:rgb(190, 161, 161);font-size: 10px;margin-left: 10px;')




</script>
<style  scoped></style>
